<template>
  <div class="crm-page home-page">
    <div class="page-header">销售漏斗</div>
    <div class="page-card pd10">
      <el-row class="page-search" :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="2">
          <el-select v-model="queryParam.orgType" @change="handleChange">
            <el-option value="2" label="个人" />
            <el-option value="1" label="部门" />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="2">
          <el-select v-model="queryParam.searchType" @change="handleChange">
            <el-option v-for="d in dateTypes" :key="d.value" :value="d.value" :label="d.label" />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">  <el-button type="primary" @click="handleSearch">搜索</el-button></el-col>
      </el-row>
    </div>
    <div class="page-content">
      <div class="page-report-chart" style="width:800px;margin:0 auto">
        <saleFunnelChart ref="saleFunnelChart" @handle="handleChart" />
      </div>
      <div class="report-tabs" style="width:800px;margin:0 auto">
        <el-tabs v-model="activeTab" @tab-click="handleChangeTab">
          <el-tab-pane v-for="s in saleStagesReport" :key="s.value" :label="s.label" :name="s.value+''" />
        </el-tabs>
      </div>
      <div class="">
        <base-table ref="table" style="padding-top:20px;width:800px;margin:0 auto" :load-data="loadData">
          <el-table-column
            label="商机名称"
            prop="name"
            show-overflow-tooltip
            header-align="center"
          >
            <template slot-scope="{row}">
              <a class="table-link" @click="gotoDetail(row)">{{ row.name }}</a>
            </template>
          </el-table-column>
          <el-table-column
            label="客户名"
            prop="customerName"
            show-overflow-tooltip
            header-align="center"
          >
            <template slot-scope="{row}">
              <a class="table-link" @click="gotoCustomerDetail(row)">{{ row.customerName }}</a>
            </template>
          </el-table-column>
          <el-table-column
            label="商机金额（元）"
            prop="value"
            header-align="center"
            align="right"
          >
            <template slot-scope="{row}">
              {{ row.amount| moneyFormat }}
            </template>
          </el-table-column>
          <el-table-column
            label="所有人"
            prop="owner"
            header-align="center"
            width="100"
          />
          <el-table-column
            label="创建日期"
            prop="createTime"
            header-align="center"
            width="100"
          >
            <template slot-scope="{row}">
              {{ row.createTime |dateFormat('YYYY-MM-DD') }}
            </template>
          </el-table-column>
          <el-table-column
            label="创建人"
            header-align="center"
            prop="createName"
            width="100"
          />

        </base-table>
      </div>
    </div>
  </div>
</template>
<script>
import saleFunnelChart from '../home/components/saleFunnelChart.vue'
import { dateTypes, saleStagesReport } from '@/utils/enums'
import { getSalesFunnel } from '@/api/chart'
import { getChanceList } from '@/api/chance'

import BigNumber from 'bignumber.js'
export default {
  name: 'SaleTargets',
  components: { saleFunnelChart },
  data() {
    return {
      dateTypes,
      saleStagesReport,
      activeTab: '1',
      queryParam: {
        searchType: 7,
        orgType: '2'
      }
    }
  },
  mounted() {
    this.getFunnel()
  },
  methods: {
    loadData() {
      const params = this.getURLParams()
      const queryParam = {
        saleStage: this.activeTab,
        orgType: this.queryParam.orgType,
        searchTimeType: this.queryParam.searchType
      }
      // if (this.queryParam.orgType === '1') {
      //   queryParam.owner = ''
      // } else if (this.queryParam.orgType === '2') {
      //   queryParam.owner = this.USER.userName
      // }
      if (params && params.dateType) {
        this.queryParam.searchTimeType = Number(params.dateType)
      }

      // getsalesPerformance 获取销售业绩
      return getChanceList(queryParam).then((res) => {
        return res
      })
    },
    getFunnel() {
      const params = this.getURLParams()
      if (params && params.dateType) {
        this.queryParam.searchType = Number(params.dateType)
      }
      getSalesFunnel(this.queryParam).then((res) => {
        const data = res
        const list = []
        saleStagesReport.forEach((item) => {
          var f = data.find((f) => f.saleStage === item.value)
          list.push({
            name: item.label,
            saleStage: item.value,
            value: f ? BigNumber(f.amountTotal).toFixed(2) : 0,
            businessCount: f ? f.businessCount || 0 : 0
          })
        })
        this.$refs.saleFunnelChart.initChart({
          list,
          title: '',
          sourceData: data,
          legend: {
            top: '0'
          }
        })
      })
    },
    handleChart(params) {
      console.log('params:', params)
      const data = params.data
      if (data) {
        this.activeTab = data.saleStage + ''
        this.$refs.table.refresh(true)
      }
    },
    handleChangeTab(v) {
      this.$refs.table.refresh(true)
    },
    handleChange() {
      this.handleSearch()
    },
    handleSearch() {
      this.$refs.table.refresh(true)
      this.getFunnel()
    },
    gotoDetail(row) {
      this.gotoMainPage('chance/info', { id: row.id })
      // this.$router.push({ path: '/chance/info', query: { id: row.id }})
    },
    gotoCustomerDetail(row) {
      this.gotoMainPage('customer/info', { id: row.customerId })
      // this.$router.push({ path: '/customer/info', query: { id: row.customerId }})
    },
    gotoChance(row) {
      console.log('row:', row)
      if (!row.businessCount || row.businessCount <= 0) {
        return
      }
      this.gotoMainPage('chance', {
        dateType: this.queryParam.searchType,
        saleStage: row.saleStage,
        searchStatus: this.queryParam.orgType
      })
    }

  }
}
</script>
